<template>
  <view class="benben-input">
    <!-- :confirm-type="confirmType" -->
    <input @keyup="$emit('keyup', $event)" @focus="$emit('focus', $event)" @blur="$emit('blur', $event)"
      @confirm="$emit('confirm', $event)" @input="changeValue" :value="inputValue" :placeholder="placeholder"
      :adjust-position="true" :type="type" :focus="focus" :maxlength="maxlength" :password="password"
      :disabled="disabled" confirm-type="send" :placeholder-style="placeholderStyle" cursor-spacing="50"
      :auto-blur="true" />
    <view v-if="disabled" class="benben-input-mack"></view>
  </view>
</template>
<script>
  export default {
    name: 'benben-input',
    props: ['placeholderStyle', 'focus', 'confirmType', 'placeholder', 'maxlength', 'disabled', 'type', 'password',
      'value'
    ],
    components: {},
    //监听value
    watch: {
      value: {
        handler(val) {
          this.inputValue = val
        },
        immediate: true,
      },
    },
    computed: {
      inputLength() {
        return this.value.length
      },
    },
    data() {
      return {
        inputValue: '',
      }
    },
    methods: {
      changeValue(e) {
        let value = e.detail.value
        this.$emit('input', value)
      },
    },
    created() {},
  }
</script>
<style lang="scss" scoped>
  .benben-input {
    position: relative;

    input {
      height: inherit;
      line-height: inherit;
      font-size: inherit;
    }

    .benben-input-mack {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
  }
</style>
